<template>
<view class="fixed-box">
  <view class="nav">
     <view class="nav-left">
       <text class="iconfont icon-sousuo"></text>
     </view>
     <view class="nav-center">
      <text>地址名称</text>
     </view>
     <view class="nav-right">
      <text>登录</text>|<text>注册</text>
     </view>
  </view>
</view>
</template>

<script>
  export default {
  	data() {
  		return {
  			
  		}
  	},
  	methods: {
  
  	}
  }
</script>

<style lang="less" scoped>
  .fixed-box{
    height:100rpx;
    .nav{
      position:fixed;
      top:0;
      width:100%;
      height:100rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgb(49, 144, 232);
      z-index:2;
      .nav-left{
        width:126rpx;
        text{
          font-size:49rpx;
          font-weight:700;
          margin-left:24rpx;
          background:linear-gradient(to right,red,pink);
          background-clip:text;
          color:transparent;
        }
      }
      .nav-center{ 
        width:500rpx;
      
        text{
          display: block;
          font-size:44rpx;
          font-weight: 700;
          text-align: center;
          background:linear-gradient(to right,red,pink);
          background-clip:text;
          color:transparent;
        }
      }
      .nav-right{
        width:156rpx;
        margin-right:18rpx;
        background:linear-gradient(to right,red,pink);
        background-clip:text;
        color:transparent;
        text{
          font-size:32rpx;
          font-weight: 700;
        }
        
      }
    }
  }
</style>